﻿@{
    ViewBag.SubTitle = "购物车";
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
}

<style type="text/css">
    body {
        /*margin-top: 1.5rem;*/
         margin-top: 1.2rem;
        margin-bottom: 0.55rem;
    }

    #divTopTitleBar {
        position: fixed;
        left: 0rem;
        right: 0rem;
        /*top: 1rem;*/
         top:0.7rem;
        height: 0.4rem;
        background-color: white;
    }

    #divFooter {
        background-color: white;
        position: fixed;
        bottom: 0px;
        left: 0px;
        right: 0px;
        height: 0.5rem;
        font-size: 0.13rem;
        text-align: center;
    }

    .divCommodityItem {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        padding: 0.1rem 0.05rem;
        min-height: 0.8rem;
        width: 100%;
        color: #535353;
        margin-top: 0.05rem;
    }

    .imgPointCommodity {
        max-height: 0.8rem;
        max-width: 85%;
        vertical-align: middle;
    }
</style>

<script type="text/javascript">

    var _pointCommodityList;

    $(document).ready(function () {
        loadData();
    });

    function getPointCommodity(id) {

        for (var i = 0; i < _pointCommodityList.length; i++) {

            if (_pointCommodityList[i].PointCommodity == id)
                return _pointCommodityList[i];
        }
    }

    function loadData(targetPage) {

        var loadLayerIndex = layer.open({
            type: 2,
            shadeClose: false,
            content: '请稍候...'
        });

        $.ajax({
            url: "/Api/PointCommodity/GetShoppingCartItemList/@ViewBag.Domain.Id",
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR) {
                // alert(data);
                layer.close(loadLayerIndex);
                if (data.Success) {
                    var resultObj = data.Data;
                    _pointCommodityList = resultObj.ItemList;

                    //alert(JSON.stringify(resultObj));
                    var gettpl = document.getElementById('pointCommodityListTemplate').innerHTML;
                    laytpl(gettpl).render(resultObj.ItemList, function (html) {
                        document.getElementById('pointCommodityContainer').innerHTML += html;

                        selectAll();
                    });

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                //alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function selectAll() {

        if ($("#checkboxAll").is(':checked')) {
            $("#pointCommodityContainer input[type='checkbox']").prop("checked", true);
        } else {
            $("#pointCommodityContainer input[type='checkbox']").removeAttr("checked");
        }

        sum();
    }

    function increment(pointCommoditId) {

        var loadLayerIndex = layer.open({
            type: 2,
            shadeClose: false,
            content: '请稍候...'
        });

        var args = new Object();
        args.PointCommodity = pointCommoditId;
        args.Quantity = 1;

        $.ajax({
            url: "/Api/PointCommodity/AddToCart/@ViewBag.Domain.Id",
            type: "POST",
            dataType: "json",
            data: JSON.stringify(args),
            success: function (data, status, jqXHR) {
                layer.close(loadLayerIndex);
                if (data.Success) {
                    //var quantity = parseInt($("#" + pointCommoditId + "_quantity").val());
                    //if (isNaN(quantity)) {
                    //    quantity = 0;
                    //}
                    //quantity = quantity + 1;
                    //$("#" + pointCommoditId + "_quantity").val(quantity);

                    $("#" + pointCommoditId + "_quantity").val(data.Data.Data.Quantity);

                    sum();

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                //alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function decrement(pointCommoditId) {

        var loadLayerIndex = layer.open({
            type: 2,
            shadeClose: false,
            content: '请稍候...'
        });

        var args = new Object();
        args.PointCommodity = pointCommoditId;
        args.Quantity = 1;

        $.ajax({
            url: "/Api/PointCommodity/RemoveFormCart/@ViewBag.Domain.Id",
            type: "POST",
            dataType: "json",
            data: JSON.stringify(args),
            success: function (data, status, jqXHR) {
                layer.close(loadLayerIndex);
                if (data.Success) {

                    var resultObj = data.Data;

                    //var quantity = parseInt($("#" + pointCommoditId + "_quantity").val());
                    //if (isNaN(quantity)) {
                    //    quantity = 0;
                    //}
                    //quantity = quantity - 1;
                    //if (quantity < 0) {
                    //    quantity = 0;
                    //}
                    //$("#" + pointCommoditId + "_quantity").val(quantity);
                    if (resultObj.Reason == 0) {
                        $("#" + pointCommoditId + "_quantity").val(resultObj.Data.Quantity);
                        sum();
                    }

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                //alert("Error: " + xmlHttpRequest.status);
            }
        });



    }

    function sum() {

        var allChecked = true;

        var allPrice = 0;
        var allPoint = 0;

        $(".divCommodityItem").each(function (index, element) {

            var pointCommodity = $(element).attr("pointcommodity");

            var quantity = parseInt($(element).find("input[type='text']").val());
            if (isNaN(quantity)) {
                quantity = 0;
            }

            var price = accDiv($(element).attr("price"),100);
            var point = $(element).attr("point");

            var totalPrice = accMul(price, quantity);
            var totalPoint = point * quantity;

            $("#spanTotalPrice_" + pointCommodity).html(totalPrice);
            $("#spanTotalPoint_" + pointCommodity).html(totalPoint);

            if ($(element).find("input[type='checkbox']").is(':checked') == false) {
                allChecked = false;
                return;
            }

            allPrice = accAdd(allPrice, totalPrice);
            allPoint += totalPoint;
        });

        $("#spanTotalPrice").html(allPrice);
        $("#spanTotalPoint").html(allPoint);

        if (allChecked) {
            $("#checkboxAll").prop("checked", true);
        } else {
            $("#checkboxAll").prop("checked", false);
        }

    }

    function order() {

        if (window.localStorage == false) {
            alert('This browser does NOT support localStorage');
        }

        var checkout = new Object();
        checkout.ItemList = new Array();
      
        var arrayIndex = 0;

        $(".divCommodityItem").each(function (index, element) {
           
            if ($(element).find("input[type='checkbox']").is(':checked') == false) {
                return;
            }
            var pointCommodityId = $(element).attr("pointcommodity");

            var quantity = parseInt($(element).find("input[type='text']").val());
            if (isNaN(quantity)) {
                quantity = 0;
            }

            if (quantity <= 0) {
                return;
            }

            var pointCommodity = getPointCommodity(pointCommodityId);

            var price = pointCommodity.Price;
            var point = pointCommodity.Point;

            var checkoutPointCommodity = new Object();
            checkoutPointCommodity.Id = pointCommodityId;
            checkoutPointCommodity.Quantity = quantity;
            checkoutPointCommodity.Price = price;
            checkoutPointCommodity.Point = point;
            checkoutPointCommodity.Name = pointCommodity.Name;
            checkoutPointCommodity.ImageUrl = pointCommodity.ImageUrl;

            checkout.ItemList[arrayIndex] = checkoutPointCommodity;

            arrayIndex++;
        });
        
        if (checkout.ItemList.length == 0) {
            layerAlert("请钩选需要结算的商品，并留意数量必须大于0。");
            return;
        }
        
        checkout.TotalPrice = parseFloat($("#spanTotalPrice").html());
        checkout.TotalPoint = parseInt($("#spanTotalPoint").html());
      //  alert(JSON.stringify(checkout));
        localStorage.checkout = JSON.stringify(checkout);
      
        window.location.href = "/PointCommodity/Checkout/@ViewBag.Domain.Id";

    }

</script>

<script id="pointCommodityListTemplate" type="text/html">

    {{# for(var i = 0, len = d.length; i < len; i=i+1){ }}

    <div class="divCommodityItem" style="" pointcommodity="{{ d[i].PointCommodity }}" price="{{ d[i].Price }}" point="{{ d[i].Point }}">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td style="width:0.3rem;" valign="middle">
                    <input type="checkbox" style="margin-right:0.00rem;" onchange="sum()" />
                </td>
                <td valign="middle" style="width:30%">
                    <img src="{{ d[i].ImageUrl }}" class="imgPointCommodity">
                </td>
                <td valign="top">
                    <div class="defaultColor" style="font-size:0.14rem;">{{ d[i].Name }}</div>
                    <div style="margin-top:0.05rem;">
                        <span id="spanTotalPrice_{{ d[i].PointCommodity }}"></span> 元 + <span id="spanTotalPoint_{{ d[i].PointCommodity }}"></span> 积分
                    </div>
                    <div style="margin-top:0.05rem;">
                        <div style="float:right;width:0.2rem;text-align:center">
                            <input type="button" class="button" style="padding:0.03rem 0.1rem" value="+" onclick="increment('{{ d[i].PointCommodity }}')" />
                        </div>
                        <div style="float:right;">
                            <input id="{{ d[i].PointCommodity }}_quantity" type="text"
                                   style="width:0.3rem;border:none;text-align:center;font-size:0.14rem;vertical-align:middle" value="{{ d[i].Quantity }}"
                                   onchange="sum()" readonly disabled  />
                        </div>
                        <div style="float:right;width:0.2rem;text-align:center">
                            <input type="button" class="button" style="padding:0.03rem 0.1rem" value="-" onclick="decrement('{{ d[i].PointCommodity }}')" />
                        </div>
                        <div style="clear:both"></div>
                    </div>
                </td>
            </tr>
        </table>
    </div>

    <div class="divDotLine" style="margin-top:0.05rem;">
    </div>

    {{# } }}

</script>

@Helpers.HeaderArea(ViewBag, "headimg")

<div id="divTopTitleBar">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height:100%">
        <tr style="height:0.27rem;">
            <td width="33%" align="center"><div onclick="goUrl('/PointCommodity/PointCommodity/@ViewBag.Domain.Id')">积分商城</div></td>
            <td width="33%" align="center"><div onclick="goUrl('/PointCommodity/ShoppingCart/@ViewBag.Domain.Id')">购物车</div></td>
            <td width="33%" align="center"><div onclick="goUrl('/PointCommodity/OrderList/@ViewBag.Domain.Id')">我的订单</div></td>
        </tr>
        <tr style="height:0.03rem;">
            <td bgcolor="#E4E4E4"></td>
            <td class="defaultBgColor"></td>
            <td bgcolor="#E4E4E4"></td>
        </tr>
    </table>
</div>

<div class="divContent" style="margin-top:0.1rem;">

    <div id="pointCommodityContainer">

    </div>

</div>

<div id="divFooter">
    <div style="height:1px;background-color:#F5F5F5">
    </div>
    <div style="margin-left:0.1rem;margin-right:0.1rem;margin-top:0.05rem">
        <table align="center" border="0" cellpadding="0" cellspacing="0" style="height:100%;width:100%;">
            <tr>
                <td valign="middle" align="left" style="width:0.7rem;">
                    <div style="">
                        <input id="checkboxAll" type="checkbox" style="margin-right:0.05rem;vertical-align:middle" onchange="selectAll()" checked /><label for="checkboxAll">全选</label>
                    </div>
                </td>
                <td align="left" style="font-size:0.14rem;">
                    <div><span id="spanTotalPrice">0</span> 元 + <span id="spanTotalPoint">0</span> 积分</div>
                </td>
                <td valign="middle" align="right" width="30%">
                    <input name="" type="button" class="button" value="结算" style="width:90%" onclick="order()">
                </td>
            </tr>
        </table>
    </div>
</div>
